const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const webpack = require('webpack')
const devMode = process.env.NODE_ENV === 'development'

module.exports = {
  mode: 'none',
  entry: './src/main.js',
  output: {
    filename: '[name].[contenthash].js',
		chunkFilename: '[name].[contenthash].js',
    path: path.join(__dirname, 'dist'),
    publicPath: '',
  },
	devtool: 'source-map',
	devServer: {
    // contentBase: path.join(__dirname, 'public'),
    compress: true,
    hot: true,
    port: 8888,
		proxy: {
			'/api': {
				// https://localhost:9999/api/users -> https://api.github.com/api/users
				target: 'https://api.github.com/',
				// https://localhost:9999/api/users -> https://api.github.com/users
				pathRewrite: {
					'^/api': ''
				},
				changeOrigin: true, // 使用 api.github.com 作为实际请求域名
			}
		}
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['thread-loader', 'cache-loader', 'babel-loader'],
      },
      {
        test: /\.(vue|js)$/,
        exclude: /node_modules/,
        use: 'eslint-loader',
        enforce: 'pre'
      },
      {
        test: /\.css$/,
        use: [
          { loader: devMode ? 'style-loader' : MiniCssExtractPlugin.loader }, 
          'css-loader'
        ],
      },
      {
        test: /\.less$/i,
        use: [
          { loader: devMode ? 'style-loader' : MiniCssExtractPlugin.loader }, 
          'css-loader', 'less-loader',
        ] 
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[contenthash:6].[ext]',
              // publicPath (name) {},
              esModule: false,
              outputPath (url) {
                return `assets/img/${url}`
              }
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'webpack test',
      filename: devMode ? 'index.html' : 'assets/index.html',
      template: 'public/index.html',
      favicon: 'public/favicon.ico',
      // meta: {
      //   // viewport
      // },
      // chunks: [], // 限制需要哪些 chunks
    }),
    new VueLoaderPlugin(),
		new webpack.DefinePlugin({
			'BASE_URL': '"/"'
		}),
  ],
	// optimization: {
	// 	runtimeChunk: {
	// 		name: 'manifest' // 将 webpack 的 runtime 代码拆分为一个单独的 chunk。
	// 	},
	// 	splitChunks: {
	// 			cacheGroups: {
	// 					vendor: {
	// 							name: 'chunk-vendors',
	// 							test: /[\\/]node_modules[\\/]/,
	// 							priority: -10,
	// 							chunks: 'initial'
	// 					},
	// 					common: {
	// 							name: 'chunk-common',
	// 							minChunks: 2,
	// 							priority: -20,
	// 							chunks: 'initial',
	// 							reuseExistingChunk: true
	// 					}
	// 			},
	// 	}
	// },
}